<!DOCTYPE html>
<html lang="ch">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}{% endblock title %}</title>
    <link rel="stylesheet" href="{{ url_for('blog.static', filename='css/blog/style.css') }}">
    <link rel="stylesheet" href="{{ url_for('blog.static', filename='css/buefy.min.css') }}">
    <link rel="stylesheet" href="{{ url_for('auth.static', filename='css/bootstrap.min.css') }}">
    {% block extra_head_style %}{% endblock extra_head_style %}
</head>

<body>
    <div id="main_window">
        <div id="navigation">
            <img src="{{ url_for('auth.static', filename='images/logo2.png') }}" alt="log" style="width: 200px; height: 80px; margin-top: 35px;">
            <div id="navigation_left">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="#">主页</a></li>
                        <li class="breadcrumb-item"><a href="#">新闻</a></li>
                        <li class="breadcrumb-item"><a href="#">博问</a></li>
                        <li class="breadcrumb-item"><a href="#">专区</a></li>
                        <li class="breadcrumb-item"><a href="#">闪存</a></li>
                        <li class="breadcrumb-item"><a href="#">班级</a></li>
                        <li class="breadcrumb-item"><a href="#">怀旧</a></li>
                        <li class="breadcrumb-item"><a href="#">发现</a></li>
                        <!-- <li class="breadcrumb-item active" aria-current="page">Data</li> -->
                    </ol>
                </nav>
                <div id="search" class="input-group mb-3">
                    <input type="text" class="form-control" placeholder="python" aria-label="Recipient's username" aria-describedby="button-addon2" style="width: 300px;">
                    <button class="btn btn-outline-secondary" type="button" id="button-addon2">搜索</button>
                </div>
            </div>

            <div id="right_buttons">
                <!-- 用户登录显示用户昵称、个人中心、退出按钮 -->
                {% if g.user %}
                <a href="{{ url_for('blog.create') }}">
                    <button type="button" class="btn btn-outline-secondary">写作</button>
                </a>
                <a href="#">
                    <button type="button" class="btn btn-outline-success">个人中心</button>
                </a>
                <a href="{{ url_for('auth.logout') }}">
                    <button type="button" class="btn btn-outline-danger">退出</button>
                </a>
                {% else %}
                <!-- 用户未登录，显示登录注册按钮 -->
                <a href="{{ url_for('auth.register') }}">
                    <button type="button" class="btn btn-outline-primary">注册</button>
                </a>
                <a href="{{ url_for('auth.login') }}">
                    <button type="button" class="btn btn-outline-success">登录</button>
                </a>
                {% endif %}
            </div>
        </div>
        <div id="message" style="text-align: center;">
            {% if g.user %}
                <div class="alert alert-warning" role="alert">
                    欢迎您 {{ g.user['username'] }}
                </div>      
            {% else %}
                <!-- 用户未登录，显示登录注册按钮 -->
                <div></div>  
            {% endif %}
        </div>
        <div id="middle">
            <div id="middle_left">
                <div id="left_bar">
                    <ul class="nav flex-column">
                        <li class="nav-item">
                            <a class="nav-link active" aria-current="page" href="#">分类</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">精华</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">候选</a>
                        </li>
                        <br>
                        <li class="nav-item">
                            <a class="nav-link" href="#">订阅</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">关注</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">我评</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">我赞</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">更多</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
                        </li>
                    </ul>
                </div>
                <div id="content">
                    <div class="card" style="width: 100%;">
                        <div class="card-body">
                            <h5 class="card-title">Card title</h5>
                            <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                            <p class="card-text">Some quick example text to build on the card title and make up the bulk
                                of the card's content.</p>
                            <a href="#" class="card-link">Card link</a>
                            <a href="#" class="card-link">Another link</a>
                        </div>
                    </div>
                </div>
                <div id="rank">
                    <ul class="nav flex-column">
                        <li class="nav-item">
                            <a class="nav-link active" aria-current="page" href="#">分类</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">精华</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">候选</a>
                        </li>
                        <br>
                        <li class="nav-item">
                            <a class="nav-link" href="#">订阅</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">关注</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">我评</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">我赞</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">更多</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
                        </li>
                    </ul>
                </div>
            </div>

        </div>
        <div id="floot">

        </div>
    </div>




    <script src="{{ url_for('blog.static', filename='js/vue.js') }}"></script>
    <script src="{{ url_for('blog.static', filename='js/buefy.min.js') }}"></script>
    <script src="{{ url_for('auth.static', filename='js/bootstrap.bundle.min.js') }}"></script>
    {% block extra_foot_script %}{% endblock extra_foot_script %}
    <script>
        // var app = new Vue({
        //     el: "#app",
        //     data: {},
        //     methods: {}
        // })
    </script>
</body>

</html>